<script setup lang="ts">
  import { computed } from 'vue';

  const props = withDefaults(
    defineProps<{
      name: string;
      count: number;
      colNumber: number;
      rowNumber?: number;
    }>(),
    {}
  );

  const rowNumber = computed(() => {
    return parseInt((props.count / props.colNumber).toFixed(0), 10);
  });

  const colWidth = computed(() => {
    // return `${(100 / props.colNumber).toFixed(2)}%`;
    return '120px';
  });
</script>

<template>
  <div class="cabinet-wrapper">
    <table>
      <colgroup>
        <col v-for="colIndex in colNumber" :key="colIndex" :width="colWidth" />
      </colgroup>

      <thead>
        <tr>
          <th :colspan="colNumber">{{ name }}</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(_, rowIndex) in rowNumber" :key="rowIndex">
          <td v-for="colIndex in colNumber" :key="`${rowIndex}-${colIndex}`">
            <div class="box-item flex gap-4 items-center justify-between">
              <a-checkbox value="1" />
              <span class="name">
                (储){{ rowIndex * colNumber + colIndex }}
              </span>
              <icon-lock />
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style lang="less" scoped>
  .cabinet-wrapper {
    table {
      //   table-layout: fixed;
      //   width: 100%;
      border: 1px solid #e5e5e5;
      border-collapse: collapse;
      th,
      td {
        border: 1px solid #e5e5e5;
        padding: 4px 10px;
      }

      .box-item {
      }
    }
  }
</style>
